<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>数字骰子</title>
</head>
<style>
    .baba {
        width: 60px;
        height: 60px;
        text-align: center;
        line-height: 60px;
        font-size: 38px;
        font-family: cursive;
        color: #ffffff;
        /* position: absolute;
        top: 50%;
        left: 50%; */
        margin: 50px 50px;
        transform: rotateX(30deg) rotateY(30deg);
        /* background-color: black; */
        transform-style: preserve-3d;
        /* 设置3d一定要声明环境 */
        /* animation:domo 2s ease 0s 1 alternate; */

    }

    @keyframes domo {
        20% {
            transform: rotateX(533deg);
        }

        60% {
            transform: rotateX(1462deg) rotateY(2230deg);
        }

        100% {
            transform: rotateX(1400deg) rotateY(1000deg) rotateZ(-100deg);
        }
    }

    .facet {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }

    .front {
        background-color: #838383;
        transform: translateZ(30px);
    }

    .right {
        background-color: #804646;
        transform: rotateY(90deg) translateZ(30px);
    }

    .back {
        background-color: #87ce87;
        transform: rotateY(180deg) translateZ(30px);
    }

    .left {
        background-color: #87cd12;
        transform: rotateY(-90deg) translateZ(30px);
    }

    .top {
        background-color: #892318;
        transform: rotateX(90deg) translateZ(30px);
    }

    .bottom {
        background-color: #87ceeb;
        transform: rotateX(-90deg) translateZ(30px);
    }
</style>

<body>
    <button>开始摇骰子</button>
    <div class="baba">
        <div class="facet front">1</div>
        <div class="facet right">2</div>
        <div class="facet back">3</div>
        <div class="facet left">4</div>
        <div class="facet top">5</div>
        <div class="facet bottom">6</div>
    </div>

    <div class="baba">
        <div class="facet front">1</div>
        <div class="facet right">2</div>
        <div class="facet back">3</div>
        <div class="facet left">4</div>
        <div class="facet top">5</div>
        <div class="facet bottom">6</div>
    </div>

    <div class="baba">
        <div class="facet front">1</div>
        <div class="facet right">2</div>
        <div class="facet back">3</div>
        <div class="facet left">4</div>
        <div class="facet top">5</div>
        <div class="facet bottom">6</div>
    </div>

    <div class="baba">
        <div class="facet front">1</div>
        <div class="facet right">2</div>
        <div class="facet back">3</div>
        <div class="facet left">4</div>
        <div class="facet top">5</div>
        <div class="facet bottom">6</div>
    </div>

    <div class="baba">
        <div class="facet front">1</div>
        <div class="facet right">2</div>
        <div class="facet back">3</div>
        <div class="facet left">4</div>
        <div class="facet top">5</div>
        <div class="facet bottom">6</div>
    </div>
    <script>
        var baba = document.querySelectorAll(".baba"),
            btn = document.querySelector("button");
        var num = [{ x: 0, y: 0 },
        { x: 0, y: 90 },
        { x: 0, y: 180 },
        { x: 0, y: -90 },
        { x: 90, y: 0 },
        { x: -90, y: 0 },]

        // baba.style.animation= "domo 2s ease 0s 1 alternate";

        function shake() {
            baba.forEach(function (val) {
                // console.log(val);
                var i_ind = Math.floor(Math.random() * 6);
                val.style.transform = `rotateX(${num[i_ind].x}deg) rotateY(${num[i_ind].y}deg)`;
                val.style.animation = "domo 2s ease 0s 1 alternate";
                val.addEventListener("animationend",function(){
                     val.style.animation = "";
                })
            })
        }
        btn.addEventListener("click",function(){
            shake();
        })
    </script>
</body>

</html>